<article class="module-myorder module-myorder--history">
    <div class="m-table-flex m-table-flex--dark">
        <div class="thead">
            <div class="tr">
                <div class="th" style="width: 15%">{{$t('myOrder.orderTime')}}</div>
                <div class="th" style="width: 5%">{{$t('myOrder.type')}}</div>
                <div class="th fn-ta-right" style="width: 12%">{{$t('myOrder.orderPrice')}}</div>
                <div class="th fn-ta-right" style="width: 12%">{{$t('myOrder.avgPrice')}}</div>
                <div class="th fn-ta-right" style="width: 14%">{{$t('myOrder.orderVolume')}}</div>
                <div class="th fn-ta-right" style="width: 14%">{{$t('myOrder.tradingVolume')}}</div>
                <div class="th fn-ta-right" style="width: 15%">{{$t('myOrder.tradingTotal')}}</div>
                <div class="th fn-ta-right" style="width: 13%; padding-right: 12px;">{{$t('myOrder.status')}}</div>
            </div>
        </div>
        <div class="tbody" style="overflow: auto; max-height: 160px;">
            <template v-if="isLoading === true">
                <loading theme="dark"></loading>
            </template>
            <template v-else>
                <div class="item" v-for="item in list" v-if="list.length > 0">
                    <div class="tr">
                        <div class="td" style="width: 15%">
                            <p class="date">{{item.createTime | timezone}}</p>
                        </div>
                        <div class="td" v-html="item.tradeCoinTypeHtml" style="width: 5%"></div>
                        <div class="td fn-ta-right" style="width: 12%">
                            <!-- 市价 -->
                            <span class="text" v-if="item.tradeCoinFlag === CONFIG.TRADE_FLAG_MARKET.KEY">Market Price</span>
                            <!-- 限价 -->
                            <span class="text" v-if="item.tradeCoinFlag === CONFIG.TRADE_FLAG_FIXED.KEY">{{filter.floorFixPrice(item.price, $$coinPrecision) +' '+ $$symbol.split('_')[0]}}</span>
                        </div>
                        <div class="td fn-ta-right" style="width: 12%">{{filter.floorFixPrice(item.averagePrice, $$coinPrecision) +' '+ $$symbol.split('_')[0]}}</div>
                        <div class="td fn-ta-right" style="width: 14%">
                            <!-- 市价 -->
                            <template v-if="item.tradeCoinFlag === CONFIG.TRADE_FLAG_MARKET.KEY">
                                <!--卖出-->
                                <span class="text" v-if="item.tradeCoinType == CONFIG.TRADE_TYPE_SELL.KEY">{{filter.floorFix(item.number,$$amountPrecision)+' '+coin}}</span>
                                <!--买入-->
                                <span class="text" v-if="item.tradeCoinType == CONFIG.TRADE_TYPE_BUY.KEY">{{filter.floorFix(item.market, $$coinPrecision)+' '+$$symbol.split('_')[0]}}</span>
                            </template>
                            <!--限价-->
                            <template v-if="item.tradeCoinFlag === CONFIG.TRADE_FLAG_FIXED.KEY">
                                <span class="text">{{filter.floorFix(item.number,$$amountPrecision)}} {{coin}}</span>
                            </template>
                        </div>
                        <div class="td fn-ta-right" style="width: 14%">{{filter.floorFix(item.tradedCoin,$$amountPrecision)+' '+coin}}</div>
                        <div class="td fn-ta-right" style="width: 15%">{{filter.floorFix(item.matchedMoney, $$coinPrecision)+' '+$$symbol.split('_')[0]}}</div>
                        <div class="td fn-ta-right" style="width: 13%; ">
                            <span class="info" v-if="item.tradeCoinStatus === CONFIG.TRADE_STATUS_SUCCESS.KEY">
                                {{CONFIG.TRADE_STATUS_SUCCESS[$i18n.locale]}}
                            </span>
                            <!--状态是cancel，且numberOver的值不为空-->
                            <!--去掉partical-->
                            <span class="info" v-if="item.tradeCoinStatus === CONFIG.TRADE_STATUS_CANCEL.KEY && item.matchedMoney > 0">
                                {{CONFIG.TRADE_STATUS_SUCCESS[$i18n.locale]}}
                            </span>
                            <span class="info" v-if="item.tradeCoinStatus === CONFIG.TRADE_STATUS_CANCEL.KEY && item.matchedMoney === 0">
                                {{CONFIG.TRADE_STATUS_CANCEL[$i18n.locale]}}
                            </span>
                        </div>
                    </div>
                    <div class="detail" v-if="item.detail">
                        <div class="detail-box" v-if="item.isLoading === true">
                            <div class="ui-loading">
                                <span class="text">{{$t('common.loading')}}...</span>
                            </div>
                        </div>
                        <div class="detail-box" v-else>
                            <div class="title">
                                <div class="title-info">
                                    <label class="label">{{$t('myOrder.totalAmount')}}：&nbsp;</label>
                                    <span class="text">
                                        <strong>{{filter.floorFix(item.totalTraded, $$coinPrecision) + $$symbol.split('_')[0]}}</strong>
                                    </span>
                                </div>
                            </div>
                            <div class="m-table m-table--dark">
                                <table width="100%">
                                    <thead>
                                    <tr>
                                        <th width="20%">{{$t('myOrder.time')}}</th>
                                        <th width="20%" class="fn-ta-right">Trading Price({{$$symbol.split('_')[0]}})</th>
                                        <th width="30%" class="fn-ta-right">Trading Volume({{coin}})</th>
                                        <th width="30%" class="fn-ta-right">Trading Amount({{$$symbol.split('_')[0]}})</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="subItem in item.detail.list">
                                        <td class="fn-font-gray">{{subItem.createTime | timezone}}</td>
                                        <td class="fn-ta-right">{{filter.floorFixPrice(subItem.price, $$coinPrecision)}}</td>
                                        <td class="fn-ta-right">{{filter.floorFix(subItem.num)}}</td>
                                        <td class="fn-ta-right">{{filter.floorFix(subItem.totalNum, $$coinPrecision)}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="history-more">
                                <template v-if="item.detail.isLoading === true">
                                    <span class="text fn-font-gray">{{$t('common.loading')}}...</span>
                                </template>
                                <template v-else>
                                    <span class="text fn-font-gray" v-if="item.detail.list.length >= 50">{{$t('myOrder.TheMaximumOfeachOrderRecordsIs50')}}.</span>
                                    <template v-else>
                                        <a href="javascript:;" v-if="item.detail.pageNo < item.detail.pageNum" class="more-link" @click="loadMore(item)">{{$t('myOrder.more')}}</a>
                                        <span class="text fn-font-gray" v-else>{{$t('myOrder.end')}}</span>
                                    </template>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
                <no-data v-if="isLoading === false && list && list.length === 0">
                    <p class="row">{{$t('myOrder.noOrderNow')}}</p>
                </no-data>
            </template>
        </div>
    </div>
    <!--<pager :page-no.sync="pageNo"-->
           <!--:on-page-change="changePage"-->
           <!--:page-num="pageNum"></pager>-->
</article>
